1
00:00:00,600 --> 00:00:03,020
Hello and welcome to this lecture.

2
00:00:03,240 --> 00:00:06,570
In this show we are going to be Kree team.

3
00:00:06,580 --> 00:00:10,790
The presentation style for their contact form.

4
00:00:10,800 --> 00:00:16,060
We're going to use recess to make the form look prettier.

5
00:00:16,080 --> 00:00:19,320
So this is how the form looks at the moment.

6
00:00:19,320 --> 00:00:27,300
By the end of this lecture to look much more prettier than this okay.

7
00:00:27,540 --> 00:00:32,490
Inside my projet folder in my text editor.

8
00:00:32,580 --> 00:00:34,400
This is the thesis.

9
00:00:34,410 --> 00:00:35,560
This is where we are right.

10
00:00:35,580 --> 00:00:41,360
Ah he says again to save time rather than you watch me type.

11
00:00:41,470 --> 00:00:49,800
The format will be that the code already written hi or placed in chunks at a time and then explain it

12
00:00:49,890 --> 00:00:51,340
to you.

13
00:00:52,230 --> 00:01:01,650
So we'd see says every note a tall style element in here says you need to know the property and then

14
00:01:01,680 --> 00:01:02,550
the value.

15
00:01:02,760 --> 00:01:07,230
So the body here is referred to as select top.

16
00:01:07,330 --> 00:01:11,260
So does the item I am trying to apply styling to.

17
00:01:11,610 --> 00:01:15,650
So with this is basically how you write this here's a syntax.

18
00:01:15,780 --> 00:01:19,280
You start with a select and then curly braces.

19
00:01:19,290 --> 00:01:21,640
That's the opening in the closing.

20
00:01:21,750 --> 00:01:31,400
In between the calibrators is where you specify what you want to select to do.

21
00:01:31,410 --> 00:01:34,570
I mean what style you want to apply to the selector.

22
00:01:34,750 --> 00:01:35,730
Well same here.

23
00:01:35,730 --> 00:01:42,720
I want the font family that is the text they use to be either some serif or aerial.

24
00:01:42,870 --> 00:01:52,350
So when you are specifying font family it's always best to specify more then one when specifying the

25
00:01:52,350 --> 00:01:55,650
font family you need to specify more than one.

26
00:01:55,860 --> 00:02:03,360
Just in case the computer or device that has been used to view this page does not have.

27
00:02:03,370 --> 00:02:05,130
Maybe your first choice.

28
00:02:05,220 --> 00:02:06,630
So this is the first choice.

29
00:02:06,630 --> 00:02:10,900
If they haven't got it all look for that they got that to look for that.

30
00:02:11,100 --> 00:02:20,460
So most computers really do have one or two of these forms so you have very use safe to use these selection

31
00:02:20,520 --> 00:02:23,650
because you are very likely to find most computers have them.

32
00:02:23,830 --> 00:02:30,600
And then here have notice when I have specified the font family have separated each one with a comma

33
00:02:31,140 --> 00:02:35,740
file now on the semicolon on your success.

34
00:02:35,990 --> 00:02:40,500
Property most penned with a semicolon on the value for the property.

35
00:02:40,510 --> 00:02:44,200
So again here I've defined another property which is a collar.

36
00:02:44,400 --> 00:02:47,940
So I want the law here to be this.

37
00:02:48,000 --> 00:02:56,340
This is an hecks value x rather than use the actual colour name I've use the hexadecimal value and this

38
00:02:56,340 --> 00:02:58,960
is a good website that I go to as well.

39
00:02:59,010 --> 00:03:01,450
Is God call or that Hextall gone.

40
00:03:01,470 --> 00:03:08,220
Again you can see different columns so try and use your collars when you create in this form so that

41
00:03:08,490 --> 00:03:16,190
it looks different and has your own impact on it so these are the heck scholars so always use them.

42
00:03:16,200 --> 00:03:20,760
Or you can use the actual column names if you know what the names are.

43
00:03:21,390 --> 00:03:27,690
Okay I posted are not a set of stylin here from like 5 to 12.

44
00:03:27,750 --> 00:03:33,300
Always end your values for your property with a semicolon.

45
00:03:33,300 --> 00:03:35,370
If not it will not work.

46
00:03:35,370 --> 00:03:36,550
Very important.

47
00:03:36,560 --> 00:03:37,620
Little things like this.

48
00:03:37,620 --> 00:03:46,140
If you miss turn out it will not reflect in the stylin case so this is these diamine for the actual

49
00:03:46,140 --> 00:03:48,030
form itself.

50
00:03:48,300 --> 00:03:57,530
If I have set it to that the margin margin bizarre Glee is the distance from the outside distance.

51
00:03:57,530 --> 00:04:01,890
Why pad padding is referred to the distance inside.

52
00:04:01,920 --> 00:04:10,660
So when you take off margin think of outside padding is the space inside high margin refers to the space

53
00:04:10,780 --> 00:04:12,380
outside.

54
00:04:12,390 --> 00:04:20,970
When you set the margin to 0 2 0 2 means it all Centre the element on the page.

55
00:04:21,120 --> 00:04:22,900
So notice I'm used to here.

56
00:04:22,900 --> 00:04:25,590
I have also used 10 pixels.

57
00:04:25,710 --> 00:04:34,830
When you set the margin usually set top right bottom left so this will add power applied to two values

58
00:04:34,860 --> 00:04:38,040
and this will apply to two values.

59
00:04:38,040 --> 00:04:47,790
When you use the how to remember the way the margin works or how you apply them.

60
00:04:47,790 --> 00:04:51,080
Think of the word trouble and then take out the valves.

61
00:04:51,100 --> 00:04:52,110
We tried the.

62
00:04:52,290 --> 00:04:57,680
So you believe we t r b l which is top right bottom left.

63
00:04:57,720 --> 00:04:59,480
That's how I remember.

64
00:05:00,400 --> 00:05:02,390
Steps so stylish.

65
00:05:03,370 --> 00:05:12,240
Okay so here I've given it padding 50 pixels these two values will cover all of them.

66
00:05:12,670 --> 00:05:20,750
When you are specifying two values for a pardon normally what that does the one use.

67
00:05:20,800 --> 00:05:26,500
This is kind of a short form way of doing it right and then specifying the four values to where you

68
00:05:26,500 --> 00:05:33,700
specified two value the value will be applied to the top and the bottom and then the second value will

69
00:05:33,700 --> 00:05:39,450
be applied to the right and the left.

70
00:05:39,700 --> 00:05:42,950
Okay so Fair's value goes to the top and bottom.

71
00:05:42,950 --> 00:05:44,300
Second value goes.

72
00:05:44,320 --> 00:05:51,430
So right and left is the same process where the padding as well whereby you've got two values specify

73
00:05:51,940 --> 00:05:54,350
it would be applied in that order.

74
00:05:54,680 --> 00:05:58,790
Background for used hex value here.

75
00:05:58,870 --> 00:06:00,240
This is black.

76
00:06:00,300 --> 00:06:06,370
0 0 0 padding again from the bottom up or down and up from the bottom.

77
00:06:06,370 --> 00:06:15,250
I want you want this space 0 want it to move to create a space of 55 pics for us to move hop but our

78
00:06:15,280 --> 00:06:18,130
radios his WAP is around the corner.

79
00:06:18,280 --> 00:06:20,870
So I've said this to 25 big.

80
00:06:21,010 --> 00:06:26,750
Feel free to play around with these values so that you can see how it works.

81
00:06:26,770 --> 00:06:34,840
I have said in some more stylin from line 14 to 19 this is this Whom are blind to the here.

82
00:06:34,840 --> 00:06:37,010
Each one selector.

83
00:06:37,030 --> 00:06:39,610
These are the properties the margin.

84
00:06:39,670 --> 00:06:43,710
Set it at that note is of use of force values here.

85
00:06:43,990 --> 00:06:48,760
Font size I've set it to that font size is a text size.

86
00:06:48,760 --> 00:06:53,290
I have set the text to a line to the centre.

87
00:06:53,360 --> 00:06:54,640
The colour is white.

88
00:06:54,640 --> 00:06:55,660
This is the.

89
00:06:55,690 --> 00:06:58,070
This means white in x.

90
00:06:58,120 --> 00:06:58,570
Value

91
00:07:01,540 --> 00:07:09,270
based as some more stylin from line 20 all the way to line 34.

92
00:07:09,280 --> 00:07:11,520
The process is basically the same.

93
00:07:11,520 --> 00:07:15,710
Once you can style one element the stylin is the same.

94
00:07:15,750 --> 00:07:20,050
Again these are the selectors.

95
00:07:20,170 --> 00:07:22,300
These are this thoroughly and apply to them.

96
00:07:22,300 --> 00:07:28,540
If you are not sure what any of these mean Rican read them up or contact me would be more than happy

97
00:07:28,540 --> 00:07:30,210
to explain the styling.

98
00:07:30,220 --> 00:07:33,840
Basically the same for everything board.

99
00:07:34,330 --> 00:07:36,500
Specify that I want there to be any border.

100
00:07:36,530 --> 00:07:44,440
You've got a font size height padding or we've mentioned have mentioned before in the in the US style

101
00:07:44,450 --> 00:07:48,520
so the process is exactly the same.

102
00:07:48,550 --> 00:07:56,620
I did have a box shadow there but take in there house now just to keep it really simple.

103
00:07:56,650 --> 00:08:01,560
I have pasted in the styling for the button which is a submit button.

104
00:08:01,690 --> 00:08:06,330
So that's from line 34 to line 47 again.

105
00:08:06,340 --> 00:08:10,490
The process has the same basic styling padding.

106
00:08:10,510 --> 00:08:16,980
Call or text to line and so on is basically the same thing.

107
00:08:18,590 --> 00:08:23,280
OK I've got more styling here from line 50 to 60.

108
00:08:23,320 --> 00:08:26,630
This is fieldset and the label Phil said.

109
00:08:26,650 --> 00:08:27,670
Here's what I want.

110
00:08:27,700 --> 00:08:35,220
It's what housey is the content on the form like the label where you submit your name and stuff.

111
00:08:35,320 --> 00:08:37,770
So that's what I'm giving it.

112
00:08:37,780 --> 00:08:45,010
This is a label the actual name and these are the values properties and values that are attached to

113
00:08:45,280 --> 00:08:49,560
that to that select.

114
00:08:50,340 --> 00:08:57,430
Okay finally my last time limit is from line 61 all the way to 7 to 5.

115
00:08:57,430 --> 00:08:59,720
This is where you see hash tag.

116
00:08:59,740 --> 00:09:02,760
That means it's an I.D. So this.

117
00:09:02,910 --> 00:09:03,730
Hi here.

118
00:09:03,790 --> 00:09:09,310
This is refroze to the button the reset button.

119
00:09:09,310 --> 00:09:16,560
So when you have the form if there's any data left that's this the reset button will clear the data.

120
00:09:16,570 --> 00:09:20,660
So this is just the styling to make it look pretty.

121
00:09:20,810 --> 00:09:28,840
Alright so again the process is the same the same type of stylin background call or text to line marjean

122
00:09:28,840 --> 00:09:29,600
with.

123
00:09:29,920 --> 00:09:36,930
You can always you can set to percentage or pixels when you said percentage it is relative to the container

124
00:09:37,600 --> 00:09:40,260
that the selector is in.

125
00:09:40,600 --> 00:09:50,850
So that is it for our stylin So let me just click on save to make sure all the work is saved in my brain

126
00:09:50,980 --> 00:09:54,780
that always save your work.

127
00:09:54,790 --> 00:09:57,600
Once you've done it for there are no issues.

128
00:09:57,640 --> 00:09:59,130
So work.

129
00:09:59,210 --> 00:09:59,970
Yes save.

130
00:09:59,980 --> 00:10:06,680
And just refresh the contact form and we can see why.

131
00:10:06,690 --> 00:10:07,440
So there you go.

132
00:10:07,440 --> 00:10:13,340
So that is how it looks at the moment so you can see it looks a lot prettier than how it works.

133
00:10:13,560 --> 00:10:22,590
So we have now applied styling to our Fawn necks lecture will be doing the Sears set the javascript

134
00:10:22,890 --> 00:10:25,180
to implement the local story.

135
00:10:25,350 --> 00:10:26,640
Thanks for watching.

136
00:10:26,640 --> 00:10:27,670
Bye for now.

137
00:10:27,720 --> 00:10:29,880
Let me know if you have any questions.

138
00:10:29,910 --> 00:10:31,060
Bye.